<template>
  <div class="page_main">
    <div class="side_box">
      <div class="chart_box">
        <div class="box_title">
          电消耗量统计数据
          <div class="change_box">
            月度
            <img class="icon" src="@/assets/change.png" alt="">
          </div>
        </div>
        <div ref="charts1" class="charts"></div>
      </div>
      <div class="chart_box">
        <div class="box_title">
          用电排名
        </div>
        <div class="charts">
          <div class="list" v-for="(item, index) in elecRank" :key="index">
            <div class="sort">{{ index + 1 }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}度</div>
          </div>
        </div>
      </div>
      <div class="chart_box">
        <div class="box_title">
          水气消耗量统计数据
          <div class="change_box">
            月度
            <img class="icon" src="@/assets/change.png" alt="">
          </div>
        </div>
        <div ref="charts2" class="charts"></div>
      </div>
      <div class="chart_box">
        <div class="box_title">
          用水排名
        </div>
        <div class="charts">
          <div class="list" v-for="(item, index) in waterRank" :key="index">
            <div class="sort">{{ index + 1 }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}方</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="equipment_box">
        <div class="equipment_item">
          <div class="value">
            {{ equipmentInfo.elecMeterNum }}
          </div>
          <div class="label">电表数量</div>
        </div>
        <div class="equipment_item">
          <div class="value">
            {{ equipmentInfo.gasMeterNum }}
          </div>
          <div class="label">水表数量</div>
        </div>
        <div class="equipment_item">
          <div class="value">
            {{ equipmentInfo.waterMeterNum }}
          </div>
          <div class="label">气表数量</div>
        </div>
      </div>
      <div class="statistics">
        <div class="box_title">用电统计</div>
        <div class="electricity_water">
          <div class="list">
            <div class="label">昨日用电统计</div>
            <div class="value">{{ statistic.elecYesterday }}</div>
          </div>
          <div class="list">
            <div class="label">本月用电统计</div>
            <div class="value">{{ statistic.elecMonth }}</div>
          </div>
          <div class="list">
            <div class="label">今年用电统计</div>
            <div class="value">{{ statistic.elecYear }}</div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="box_title">用水统计</div>
        <div class="electricity_water">
          <div class="list">
            <div class="label">昨日用水统计</div>
            <div class="value">{{ statistic.waterYesterday }}</div>
          </div>
          <div class="list">
            <div class="label">本月用水统计</div>
            <div class="value">{{ statistic.waterMonth }}</div>
          </div>
          <div class="list">
            <div class="label">今年用水统计</div>
            <div class="value">{{ statistic.waterYear }}</div>
          </div>
        </div>
      </div>
      <div class="circle_box">
        <div class="box_title">历史告警统计</div>
        <div class="circle_content">
          <div class="circle_item">
            <div ref="charts3" class="circle"></div>
            <div class="value large">
              <div>重大风险</div>
              <div>{{ alterStatis.majorRisk }}%</div>
            </div>
          </div>
          <div class="circle_item">
            <div ref="charts4" class="circle"></div>
            <div class="value big">
              <div>较大风险</div>
              <div>{{ alterStatis.higherRisk }}%</div>
            </div>
          </div>
          <div class="circle_item">
            <div ref="charts5" class="circle"></div>
            <div class="value average">
              <div>一般风险</div>
              <div>{{ alterStatis.generalRisk }}%</div>
            </div>
          </div>
          <div class="circle_item">
            <div ref="charts6" class="circle"></div>
            <div class="value normal">
              <div>正常风险</div>
              <div>{{ alterStatis.standardRisk }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="side_box">
      <div class="warn_info">
        <div class="box_title">实时告警信息</div>
        <div class="warn_box">
          <div class="warn_list">排序</div>
          <div class="warn_list">告警地址</div>
          <div class="warn_list">告警类型</div>
          <div class="warn_list">告警级别</div>
        </div>
        <div class="swiper_box">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in altermsg" :key="index" :a="item">
              <div class="info_list">{{ index + 1 }}</div>
              <div class="info_list">{{ item.alterAddress }}</div>
              <div class="info_list">{{ item.type }}</div>
              <div :class="warnType(item.status)">{{ item.level }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import * as echarts from 'echarts';
import api from "@/utils/api/index.js";

export default {
  name: 'EnergySources',

  data() {
    return {
      timer: null,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      equipmentInfo: {
        elecMeterNum: '0',//电表数量
        gasMeterNum: '0',//气表数量
        waterMeterNum: '0'//水表数量
      },
      statistic: {
        elecMonth: '0',//本月用电统计
        elecYear: '0',//今年用电统计
        elecYesterday: '0',//昨日用电统计
        waterMonth: '0',
        waterYear: '0',
        waterYesterday: '0'
      },//统计
      altermsg: [],
      alterStatis: {},
      elecRank: [],
      waterRank: [],
    }
  },



  mounted() {
    this.initCharts()
    // this.initSwiper()
    // this.initCharts1()
    // this.initCharts2()
    // this.initCharts3()
    // this.initCharts4()
    // this.initCharts5()
    // this.initCharts6()

  },
  beforeDestroy() {
    this.clearData();
  },


  methods: {
    initCharts() {
      this.myChart1 = echarts.init(this.$refs.charts1)
      this.myChart2 = echarts.init(this.$refs.charts2)
      this.myChart3 = echarts.init(this.$refs.charts3)
      this.myChart4 = echarts.init(this.$refs.charts4)
      this.myChart5 = echarts.init(this.$refs.charts5)
      this.myChart6 = echarts.init(this.$refs.charts6)
      this.getData()
      this.switper()
    },
    /**
  * 获取数据
  */
    async getData() {
      var that = this;
      await api.getEnergy({}).then(({ data }) => {
        if (data.code == 200) {
          console.log("能源", data);
          that.pageResult = data.result
          that.setData(data.result);
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.echartsAutoTime
      );

    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    /**
    * 整理格式
    */
    setData(result) {
      var that = this
      // 园区设备信息
      that.equipmentInfo = result.equipmentInfo
      //统计
      if (result.statistics) {
        var statistic = {
          elecMonth: result.statistics.elecMonth,//本月用电统计
          elecYear: result.statistics.elecYear,//今年用电统计
          elecYesterday: result.statistics.elecYesterday,//昨日用电统计
          waterMonth: result.statistics.waterMonth,
          waterYear: result.statistics.waterYear,
          waterYesterday: result.statistics.waterYesterday
        }

        that.statistic = statistic;
      }
      //电消耗量统计数据
      if (result.elecStatis) {
        var xData = []
        var yData = []
        var yData2 = []
        result.elecStatis.forEach((item) => {
          xData.push(item.xname)
          yData.push(item.value)
          if (item.value2) {
            yData2.push(item.value2)
          }
        })
        that.initCharts1(xData, yData, yData2)
      }
      //水汽消耗量统计数据
      if (result.waterStatis) {
        var xData = []
        var yData = []
        var yData2 = []
        result.waterStatis.forEach((item) => {
          xData.push(item.xname)
          yData.push(item.value)
          if (item.value2) {
            yData2.push(item.value2)
          }
        })
        that.initCharts2(xData, yData, yData2)
      }
      //用电排名
      if (result.elecRank) {
        that.elecRank = result.elecRank

      }
      //用水排名
      if (result.waterRank) {
        that.waterRank = result.waterRank

      }



      if (result.altermsg) {
        that.altermsg = result.altermsg
        that.$nextTick(() => {
          that.initSwiper()
        })
      }
      //历史告警统计
      if (result.alterStatis) {
        var alterStatis = {
          generalRisk: result.alterStatis.generalRisk,
          higherRisk: result.alterStatis.higherRisk,
          majorRisk: result.alterStatis.majorRisk,
          standardRisk: result.alterStatis.standardRisk
        }
        that.alterStatis = alterStatis
        that.initCharts3(alterStatis.majorRisk)
        that.initCharts4(alterStatis.higherRisk)
        that.initCharts5(alterStatis.generalRisk)
        that.initCharts6(alterStatis.standardRisk)

      }


    },
    warnType(status) {
      if (status == 2) {
        return 'info_list average'
      } else if (status == 3) {
        return 'info_list big'
      } else if (status == 4) {
        return 'info_list large'
      } else {
        return 'info_list normal'
      }
    },
    initSwiper() {
      new Swiper(".swiper_box", {
        slidesPerView: '17',
        loop: true, // 循环模式选项
        direction: 'vertical', // 垂直切换选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },//可选选项，自动滑动
        spaceBetween: 0
      })
    },
    initCharts1(xData, yData, yData2) {
      var myChart = this.myChart1
      // const dom = this.$refs.charts1
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        grid: {
          left: '10%',
          right: '5%',
          bottom: '20%',
          top: '10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true, // 显示 y 轴网格线
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
              type: 'dashed' // 将线条样式设置为虚线
            }
          }
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(204, 175, 255, 0.6)' },
                { offset: 1, color: 'rgba(204, 175, 255, 0)' },
              ])
            },
            data: yData,
            itemStyle: {
              color: '#CCAFFF' // 第二条折线的颜色
            }
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(4, 243, 221, 0.6)' },
                { offset: 1, color: 'rgba(4, 243, 221, 0)' },
              ])
            },
            data: yData2,
            itemStyle: {
              color: '#04F3DD' // 第二条折线的颜色
            }
          },
        ]
      };
      myChart.setOption(option);
    },
    initCharts2(xData, yData, yData2) {
      var myChart = this.myChart2
      // const dom = this.$refs.charts2
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        grid: {
          left: '10%',
          right: '5%',
          bottom: '20%',
          top: '10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true, // 显示 y 轴网格线
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
              type: 'dashed' // 将线条样式设置为虚线
            }
          }
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(204, 175, 255, 0.6)' },
                { offset: 1, color: 'rgba(204, 175, 255, 0)' },
              ])
            },
            data: yData,
            itemStyle: {
              color: '#CCAFFF' // 第二条折线的颜色
            }
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            smooth: true,  // 平滑曲线
            areaStyle: {   // 阴影区域
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(4, 243, 221, 0.6)' },
                { offset: 1, color: 'rgba(4, 243, 221, 0)' },
              ])
            },
            data: yData2,
            itemStyle: {
              color: '#04F3DD' // 第二条折线的颜色
            }
          },
        ]
      };
      myChart.setOption(option);
    },
    initCharts3(value) {
      var myChart = this.myChart3
      // const dom = this.$refs.charts3
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#DB4963'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: ''
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts4(value) {
      var myChart = this.myChart4
      // const dom = this.$refs.charts4
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#FF9617'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: ''
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts5(value) {
      var myChart = this.myChart5
      // const dom = this.$refs.charts5
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#FCD159'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: ''
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts6(value) {
      var myChart = this.myChart6
      // const dom = this.$refs.charts6
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#1B9FA6'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: ''
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },



  }
}
</script>
<style scoped lang="scss">
.page_main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .side_box {
    width: 27.84%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .chart_box {
      height: 24.5%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .charts {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;

        .list {
          display: flex;
          width: 100%;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 12px;
          color: #FFFFFF;

          .sort {
            width: 20%;
          }

          .name {
            width: 50%;
          }

          .value {
            width: 30%;
          }
        }
      }
    }

    .warn_info {
      width: 100%;
      height: 100%;
      background: #022E51;
      border-radius: 10px 10px 0 0;

      .warn_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .warn_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;

        }
      }

      .swiper_box {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc((100% / 4) - 6px);
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              padding: 0 3px;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.normal {
                color: #1B9FA6;
              }

              &.average {
                color: #FCD159;
              }

              &.big {
                color: #FF9617;
              }

              &.large {
                color: #DB4963;
              }
            }
          }
        }
      }
    }
  }

  .center_box {
    width: 41.54%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .equipment_box {
      width: 100%;
      height: 21%;
      background: #00538A;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      align-items: center;
      justify-content: center;

      .equipment_item {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .value {
          display: flex;
          align-items: flex-end;
          justify-content: center;
          width: 114px;
          font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
          font-weight: 400;
          color: #30BEF4;
          font-size: 34px;
        }

        .label {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 114px;
          height: 30px;
          border-radius: 15px;
          border: 1px solid #1A9ACB;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 16px;
          color: #1A9ACB;
          margin-top: 25px;
        }
      }
    }

    .statistics {
      height: 22%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .electricity_water {
        width: 100%;
        height: calc(100% - 45px);
        display: flex;
        align-items: center;
        border-radius: 10px 10px 0px 0px;
        overflow: hidden;
        background: #00538A;

        .list:nth-child(odd) {
          background: #073B62;
        }

        //奇数行
        .list:nth-child(even) {
          background: #022E51;
        }

        .list {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .label {
            height: 40%;
            width: 100%;
            box-sizing: border-box;
            border-bottom: 1px solid #005072;
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 14px;
            color: #1A9ACB;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .value {
            flex: 1;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
            font-weight: 400;
            font-size: 16px;
            color: #30BEF4;
          }
        }
      }
    }

    .circle_box {
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      height: 29%;
      flex-direction: column;

      .circle_content {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .circle_item {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .circle {
            width: 100%;
            flex: 1;
          }

          .value {
            padding-bottom: 10px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #DB4963;

            &.normal {
              color: #1B9FA6;
            }

            &.average {
              color: #FCD159;
            }

            &.big {
              color: #FF9617;
            }

            &.large {
              color: #DB4963;
            }
          }
        }
      }
    }
  }
}

.box_title {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #003F5A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
  font-weight: 400;
  font-size: 18px;
  box-sizing: border-box;
  color: #1A9ACB;
  position: relative;

  .change_box {
    position: absolute;
    margin: auto;
    right: 5px;
    top: 0;
    bottom: 0;
    width: 78px;
    height: 24px;
    border: 1px solid #003F5A;
    font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
    font-weight: 400;
    font-size: 14px;
    color: #1A9ACB;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .icon {
      width: 13px;
      height: 13px;
    }
  }
}
</style>